<template>
  <div class="outplace">
    <my-head title="出场管理" :isRightClick = "true"/>

    <mu-text-field v-model="vin" @blur="" placeholder="VIN" ref="vin" class='input' @keyup.enter.native="resData()"><i class="iconfont icon-saomiao" @click="scan('vin')"></i></mu-text-field>

    <mu-text-field v-model="driver" v-show='isDriverInput' @blur="" placeholder="司机" ref="driver" class='input' @keyup.enter.native="resData()"><i class="iconfont icon-saomiao"></i></mu-text-field>

    <mu-paper class="paper" :z-depth="2" v-show="isShowCardD" >
        <div class="list-content">VIN ：<span>{{vin}}</span></div>
        <div class="list-content">车型：<span>{{infoForm.car}}</span><em class="space"></em>颜色：<span>{{infoForm.color}}</span></div>
        <div class="list-content">配置：<span>{{infoForm.config}}</span></div>
    </mu-paper>

    <mu-paper class="paper" :z-depth="2" v-show="isShowCardT" >
        <div class="list-content">车号：<span>{{infoForm.vehicleNo}}</span></div>
        <div class="list-content">数量：<span>{{infoForm.quantity}}</span></div>
    </mu-paper>
    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
  </div>
</template>

<script>
import myHead from '@/components/header'
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  name: 'outplace',
  components: {
    myHead, scanning
  },
  data () {
    return {
        scanMark: '',
        isScanning: false,
        vin: "",
        isShowCardD: false,
        isShowCardT: false,
        isDriverInput: false,
        driver: "",
        infoForm: {
            car: "",
            config: "",
            color: "",
            driver: "",
            vehicleNo: "", // 车号
            quantity: "" // 数量
        },
        requestOnce: true
    }
  },
  methods: {
    closeing (val) {
      val ? this.isScanning = false : null;
    },
    childByValue (val) {
      if(val){
        if(val.split('&')[1] == 'vin'){
          this.vin = val.split('&')[0];
          this.resData();
        }
      }
    },
    scan (txt) {
      this.scanMark = txt;
      this.isScanning = true;
    },
    resData () {
        let data = Object.assign({},this.$store.state.user,{
            content: {
                vin : this.vin,
                number: this.driver
            }
        });
        if(this.requestOnce){
            this.requestOnce = false;
            this.common.reqData(api.app('outPlace'), data, res=>{
                console.log(res.data)
                this.requestOnce = true;
                if(res.data.status == 100 && res.data.content.flag == 0){
                    this.isDriverInput = true;
                    setTimeout(() => {
                        this.$refs.driver.$el.children[0].getElementsByTagName('input')[0].focus();
                    }, 10);
                }else if(res.data.status == 100 && res.data.content.flag == 1){
                    let outType = res.data.content.outType;
                    switch (outType) {
                        case "D":
                            this.isShowCardD = true;
                            this.infoForm.color = res.data.content.color;
                            this.infoForm.car = res.data.content.vehicleType;
                            this.infoForm.config = res.data.content.config;
                            this.Toast.success({
                                duration: 1500,
                                mask: true,
                                message: "出场成功!"
                            });
                            break;
                        case "T":
                            this.isShowCardT = true;
                            this.infoForm.vehicleNo = res.data.content.vehicleNo;
                            this.infoForm.quantity = res.data.content.quantity;
                            this.Toast.success({
                                duration: 1500,
                                mask: true,
                                message: "出场成功!"
                            });
                            break;
                        default:
                        break;
                    }
                }else{
                    this.Toast({
                        duration: 2000,
                        mask: true,
                        message: res.data.msg
                    });
                }
            },err =>{
                console.log(err)
                this.Toast.clear();
            });
        }
    }
  },
  mounted () {
    setTimeout(() => {
        this.$refs.vin.$el.children[0].getElementsByTagName('input')[0].focus();
        window.plus ? plus.key.hideSoftKeybord() : 0;
    }, 50);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.outplace{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.input{
    display: block;
    margin: 15px auto;
    width: 85%;
}
.paper, .state, .msg{
    width: 85%;
    margin: 4em auto 0;
    padding: 1.5em 0;
}
.state, .msg{
    text-align: center;
    color: red;
    font-size: 1em;
}
.list-content{
    padding: 8px 20px;
}
.library-position{
    font-size: 2.2em;
    font-weight: bold;
    color: red;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.space{
    padding: 0 20px;
}
.btn{
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.btn .mu-raised-button{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
</style>
